<script setup>
	import {
		ref,
		defineProps
	} from 'vue';
	const props = defineProps({
		title: String,
		iconState: Boolean
	})
	const backPage = () => {
		uni.navigateBack()
	}
	const moreImage = ref([
		'../../static/images/customTabbar/more-list.png',
		"../../static/images/customTabbar/more-table.png"
	])
</script>

<template>
	<view class="custom-tabbar">
		<view class="row">
			<image src="../../static/images/customTabbar/back.png" @click="backPage()"></image>
			<text>{{ title }}</text>
			<image :src="moreImage[iconState ? 0 : 1]" @click="$emit('switchIconState', !iconState)"></image>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.custom-tabbar {
		position: fixed;
		top: 0;
		z-index: 9;
		width: 92vw;
		height: 5vh;
		padding: 0 4vw;
		background-color: #fff;
		/* #ifdef APP */
		padding-top: 5vh;
		/* #endif */

		.row {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 5vw;
				height: 6vw;
			}

			text {
				font-size: 4vw;
			}
		}
	}
</style>